<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/multipage/semantics-other.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:35:51 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=../styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  
  <script defer="" crossorigin="" src=../html-dfn.js></script>
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   <hgroup><h1 class=allcaps>HTML</h1><p id=living-standard>Living Standard — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   
   

   
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=custom-elements.html>← 4.13 Custom elements</a> — <a href=index.html>Table of Contents</a> — <a href=microdata.html>5 Microdata →</a></nav><ol class=toc><li id=toc-semantics><ol><li><a href=semantics-other.html#common-idioms><span class=secno>4.14</span> Common idioms without dedicated elements</a><ol><li><a href=semantics-other.html#rel-up><span class=secno>4.14.1</span> Breadcrumb navigation</a><li><a href=semantics-other.html#tag-clouds><span class=secno>4.14.2</span> Tag clouds</a><li><a href=semantics-other.html#conversations><span class=secno>4.14.3</span> Conversations</a><li><a href=semantics-other.html#footnotes><span class=secno>4.14.4</span> Footnotes</a></ol><li><a href=semantics-other.html#disabled-elements><span class=secno>4.15</span> Disabled elements</a><li><a href=semantics-other.html#selectors><span class=secno>4.16</span> Matching HTML elements using selectors and CSS</a><ol><li><a href="semantics-other.html#case-sensitivity-of-the-css-'attr()'-function"><span class=secno>4.16.1</span> Case-sensitivity of the CSS 'attr()' function</a><li><a href=semantics-other.html#case-sensitivity-of-selectors><span class=secno>4.16.2</span> Case-sensitivity of selectors</a><li><a href=semantics-other.html#pseudo-classes><span class=secno>4.16.3</span> Pseudo-classes</a></ol></ol></ol><h3 id=common-idioms><span class=secno>4.14</span> Common idioms without dedicated elements<a href=#common-idioms class=self-link></a></h3>

  <h4 id=rel-up><span class=secno>4.14.1</span> Breadcrumb navigation<a href=#rel-up class=self-link></a></h4>

  <p>This specification does not provide a machine-readable way of describing breadcrumb navigation
  menus. Authors are encouraged to just use a series of links in a paragraph. The <code id=rel-up:the-nav-element><a href=sections.html#the-nav-element>nav</a></code>
  element can be used to mark the section containing these paragraphs as being navigation
  blocks.</p>

  

  <div class=example>

   <p>In the following example, the current page can be reached via two paths.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>nav</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/&quot;</c-><c- p>&gt;</c->Main<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> ▸
  <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/products/&quot;</c-><c- p>&gt;</c->Products<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> ▸
  <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/products/dishwashers/&quot;</c-><c- p>&gt;</c->Dishwashers<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> ▸
  <c- p>&lt;</c-><c- f>a</c-><c- p>&gt;</c->Second hand<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/&quot;</c-><c- p>&gt;</c->Main<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> ▸
  <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/second-hand/&quot;</c-><c- p>&gt;</c->Second hand<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> ▸
  <c- p>&lt;</c-><c- f>a</c-><c- p>&gt;</c->Dishwashers<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>nav</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=tag-clouds><span class=secno>4.14.2</span> Tag clouds<a href=#tag-clouds class=self-link></a></h4>

  <p id=tag-cloud>This specification does not define any markup specifically for marking up lists
  of keywords that apply to a group of pages (also known as <i>tag clouds</i>). In general, authors
  are encouraged to either mark up such lists using <code id=tag-clouds:the-ul-element><a href=grouping-content.html#the-ul-element>ul</a></code> elements with explicit inline
  counts that are then hidden and turned into a presentational effect using a style sheet, or to use
  SVG.</p>

  <div class=example>

   <p>Here, three tags are included in a short tag cloud:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>style</c-><c- p>&gt;</c->
<c- p>.</c-><c- nc>tag-cloud</c-> <c- o>&gt;</c-> <c- f>li</c-> <c- o>&gt;</c-> <c- f>span</c-> <c- p>{</c-> <c- k>display</c-><c- p>:</c-> <c- kc>none</c-><c- p>;</c-> <c- p>}</c->
<c- p>.</c-><c- nc>tag-cloud</c-> <c- o>&gt;</c-> <c- f>li</c-> <c- p>{</c-> <c- k>display</c-><c- p>:</c-> <c- kc>inline</c-><c- p>;</c-> <c- p>}</c->
<c- p>.</c-><c- nc>tag-cloud-1</c-> <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- mf>0.7</c-><c- b>em</c-><c- p>;</c-> <c- p>}</c->
<c- p>.</c-><c- nc>tag-cloud-2</c-> <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- mf>0.9</c-><c- b>em</c-><c- p>;</c-> <c- p>}</c->
<c- p>.</c-><c- nc>tag-cloud-3</c-> <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- mf>1.1</c-><c- b>em</c-><c- p>;</c-> <c- p>}</c->
<c- p>.</c-><c- nc>tag-cloud-4</c-> <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- mf>1.3</c-><c- b>em</c-><c- p>;</c-> <c- p>}</c->
<c- p>.</c-><c- nc>tag-cloud-5</c-> <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- mf>1.5</c-><c- b>em</c-><c- p>;</c-> <c- p>}</c->

<c- p>@</c-><c- k>media</c-> <c- f>speech</c-> <c- p>{</c->
  <c- p>.</c-><c- nc>tag-cloud</c-> <c- o>&gt;</c-> <c- f>li</c-> <c- o>&gt;</c-> <c- f>span</c-> <c- p>{</c-> <c- k>display</c-><c- p>:</c-><c- kc>inline</c-> <c- p>}</c->
<c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>&gt;</c->
...
<c- p>&lt;</c-><c- f>ul</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;tag-cloud&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;tag-cloud-4&quot;</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;28 instances&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/t/apple&quot;</c-><c- p>&gt;</c->apple<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>span</c-><c- p>&gt;</c->(popular)<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;tag-cloud-2&quot;</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;6 instances&quot;</c->  <c- e>href</c-><c- o>=</c-><c- s>&quot;/t/kiwi&quot;</c-><c- p>&gt;</c->kiwi<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>span</c-><c- p>&gt;</c->(rare)<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;tag-cloud-5&quot;</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;41 instances&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/t/pear&quot;</c-><c- p>&gt;</c->pear<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>span</c-><c- p>&gt;</c->(very popular)<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c-></code></pre>

   <p>The actual frequency of each tag is given using the <code id=tag-clouds:attr-title><a href=dom.html#attr-title>title</a></code>
   attribute. A CSS style sheet is provided to convert the markup into a cloud of differently-sized
   words, but for user agents that do not support CSS or are not visual, the markup contains
   annotations like "(popular)" or "(rare)" to categorize the various tags by frequency, thus
   enabling all users to benefit from the information.</p>

   <p>The <code id=tag-clouds:the-ul-element-2><a href=grouping-content.html#the-ul-element>ul</a></code> element is used (rather than <code id=tag-clouds:the-ol-element><a href=grouping-content.html#the-ol-element>ol</a></code>) because the order is not
   particularly important: while the list is in fact ordered alphabetically, it would convey the
   same information if ordered by, say, the length of the tag.</p>

   <p>The <code id=tag-clouds:link-type-tag><a href=links.html#link-type-tag>tag</a></code> <code id=tag-clouds:attr-hyperlink-rel><a href=links.html#attr-hyperlink-rel>rel</a></code>-keyword is
   <em>not</em> used on these <code id=tag-clouds:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> elements because they do not represent tags that apply
   to the page itself; they are just part of an index listing the tags themselves.</p>

  </div>


  <h4 id=conversations><span class=secno>4.14.3</span> Conversations<a href=#conversations class=self-link></a></h4>

  

  <p>This specification does not define a specific element for marking up conversations, meeting
  minutes, chat transcripts, dialogues in screenplays, instant message logs, and other situations
  where different players take turns in discourse.</p>

  <p>Instead, authors are encouraged to mark up conversations using <code id=conversations:the-p-element><a href=grouping-content.html#the-p-element>p</a></code> elements and
  punctuation. Authors who need to mark the speaker for styling purposes are encouraged to use
  <code id=conversations:the-span-element><a href=text-level-semantics.html#the-span-element>span</a></code> or <code id=conversations:the-b-element><a href=text-level-semantics.html#the-b-element>b</a></code>. Paragraphs with their text wrapped in the <code id=conversations:the-i-element><a href=text-level-semantics.html#the-i-element>i</a></code>
  element can be used for marking up stage directions.</p>

  <div class=example>

   <p>This example demonstrates this using an extract from Abbot and Costello's famous sketch,
   <cite>Who's on first</cite>:</p>

<pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Costello: Look, you gotta first baseman?
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Abbott: Certainly.
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Costello: Who&apos;s playing first?
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Abbott: That&apos;s right.
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Costello becomes exasperated.
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Costello: When you pay off the first baseman every month, who gets the money?
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Abbott: Every dollar of it.</code></pre>

  </div>

  <div class=example>

   <p>The following extract shows how an IM conversation log could be marked up, using the
   <code id=conversations:the-data-element><a href=text-level-semantics.html#the-data-element>data</a></code> element to provide Unix timestamps for each line. Note that the timestamps are
   provided in a format that the <code id=conversations:the-time-element><a href=text-level-semantics.html#the-time-element>time</a></code> element does not support, so the
   <code id=conversations:the-data-element-2><a href=text-level-semantics.html#the-data-element>data</a></code> element is used instead (namely, Unix <code>time_t</code> timestamps).
   Had the author wished to mark up the data using one of the date and time formats supported by the
   <code id=conversations:the-time-element-2><a href=text-level-semantics.html#the-time-element>time</a></code> element, that element could have been used instead of <code id=conversations:the-data-element-3><a href=text-level-semantics.html#the-data-element>data</a></code>. This
   could be advantageous as it would allow data analysis tools to detect the timestamps
   unambiguously, without coordination with the page author.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>data</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1319898155&quot;</c-><c- p>&gt;</c->14:22<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->egof<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> I&apos;m not that nerdy, I&apos;ve only seen 30% of the star trek episodes
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>data</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1319898192&quot;</c-><c- p>&gt;</c->14:23<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->kaj<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>data</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1319898200&quot;</c-><c- p>&gt;</c->14:23<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->egof<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> it&apos;s unarguably
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>data</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1319898228&quot;</c-><c- p>&gt;</c->14:23<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>i</c-><c- p>&gt;</c->* kaj blinks<c- p>&lt;/</c-><c- f>i</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>data</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1319898260&quot;</c-><c- p>&gt;</c->14:24<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->kaj<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> you are not helping your case</code></pre>
   

  </div>

  <div class=example>

   <p>HTML does not have a good way to mark up graphs, so descriptions of interactive conversations
   from games are more difficult to mark up. This example shows one possible convention using
   <code id=conversations:the-dl-element><a href=grouping-content.html#the-dl-element>dl</a></code> elements to list the possible responses at each point in the conversation.
   Another option to consider is describing the conversation in the form of a DOT file, and
   outputting the result as an SVG image to place in the document. <a href=references.html#refsDOT>[DOT]</a></p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Next, you meet a fisher. You can say one of several greetings:
<c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;Hello there!&quot;
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> She responds with &quot;Hello, how may I help you?&quot;; you can respond with:
  <c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;I would like to buy a fish.&quot;
   <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> She sells you a fish and the conversation finishes.
   <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;Can I borrow your boat?&quot;
   <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> She is surprised and asks &quot;What are you offering in return?&quot;.
    <c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
     <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;Five gold.&quot; (if you have enough)
     <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;Ten gold.&quot; (if you have enough)
     <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;Fifteen gold.&quot; (if you have enough)
     <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> She lends you her boat. The conversation ends.
     <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;A fish.&quot; (if you have one)
     <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;A newspaper.&quot; (if you have one)
     <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;A pebble.&quot; (if you have one)
     <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> &quot;No thanks&quot;, she replies. Your conversation options
     at this point are the same as they were after asking to borrow
     her boat, minus any options you&apos;ve suggested before.
    <c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c->
   <c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;Vote for me in the next election!&quot;
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> She turns away. The conversation finishes.
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;Madam, are you aware that your fish are running away?&quot;
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> She looks at you skeptically and says &quot;Fish cannot run, miss&quot;.
  <c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;You got me!&quot;
   <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> The fisher sighs and the conversation ends.
   <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;Only kidding.&quot;
   <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> &quot;Good one!&quot; she retorts. Your conversation options at this
   point are the same as those following &quot;Hello there!&quot; above.
   <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;Oh, then what are they doing?&quot;
   <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> She looks at her fish, giving you an opportunity to steal
   her boat, which you do. The conversation ends.
  <c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In some games, conversations are simpler: each character merely has a fixed set of lines that
   they say. In this example, a game FAQ/walkthrough lists some of the known possible responses for
   each character:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>section</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Dialogue<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>small</c-><c- p>&gt;</c->Some characters repeat their lines in order each time you interact
 with them, others randomly pick from amongst their lines. Those who respond in
 order have numbered entries in the lists below.<c- p>&lt;/</c-><c- f>small</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->The Shopkeeper<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->How may I help you?
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Fresh apples!
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->A loaf of bread for madam?
 <c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->The pilot<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Before the accident:
 <c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->I&apos;m about to fly out, sorry!
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Sorry, I&apos;m just waiting for flight clearance and then I&apos;ll be off!
 <c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->After the accident:
 <c- p>&lt;</c-><c- f>ol</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->I&apos;m about to fly out, sorry!
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Ok, I&apos;m not leaving right now, my plane is being cleaned.
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Ok, it&apos;s not being cleaned, it needs a minor repair first.
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Ok, ok, stop bothering me! Truth is, I had a crash.
 <c- p>&lt;/</c-><c- f>ol</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->Clan Leader<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->During the first clan meeting:
 <c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Hey, have you seen my daughter? I bet she&apos;s up to something nefarious again...
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Nice weather we&apos;re having today, eh?
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->The name is Bailey, Jeff Bailey. How can I help you today?
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->A glass of water? Fresh from the well!
 <c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->After the earthquake:
 <c- p>&lt;</c-><c- f>ol</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Everyone is safe in the shelter, we just have to put out the fire!
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->I&apos;ll go and tell the fire brigade, you keep hosing it down!
 <c- p>&lt;/</c-><c- f>ol</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=footnotes><span class=secno>4.14.4</span> Footnotes<a href=#footnotes class=self-link></a></h4>

  <p>HTML does not have a dedicated mechanism for marking up footnotes. Here are the suggested
  alternatives.</p>

  <hr>

  <p>For short inline annotations, the <code id=footnotes:attr-title><a href=dom.html#attr-title>title</a></code> attribute could  be used.</p>

  <div class=example>

   <p>In this example, two parts of a dialogue are annotated with footnote-like content using the
   <code id=footnotes:attr-title-2><a href=dom.html#attr-title>title</a></code> attribute.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->Customer<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c->: Hello! I wish to register a complaint. Hello. Miss?
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->Shopkeeper<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c->: <strong><c- p>&lt;</c-><c- f>span</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Colloquial pronunciation of &apos;What do you&apos;&quot;</c-></strong>
<c- p>&gt;</c->Watcha<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> mean, miss?
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->Customer<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c->: Uh, I&apos;m sorry, I have a cold. I wish to make a complaint.
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->Shopkeeper<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c->: Sorry, <c- p>&lt;</c-><c- f>span</c-> <strong><c- e>title</c-><c- o>=</c-><c- s>&quot;This is, of course, a lie.&quot;</c-></strong><c- p>&gt;</c->we&apos;re
closing for lunch<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->.</code></pre>

  </div>

  
  <p class=note>Unfortunately, relying on the <code id=footnotes:attr-title-3><a href=dom.html#attr-title>title</a></code> attribute is
  currently discouraged as many user agents do not expose the attribute in an accessible manner as
  required by this specification (e.g. requiring a pointing device such as a mouse to cause a
  tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a
  modern phone or tablet).</p>

  <p class=note>If the <code id=footnotes:attr-title-4><a href=dom.html#attr-title>title</a></code> attribute is used, CSS can be used to
  draw the reader's attention to the elements with the attribute.</p>

  <div class=example>

   <p>For example, the following CSS places a dashed line below elements that have a <code id=footnotes:attr-title-5><a href=dom.html#attr-title>title</a></code> attribute.</p>

   <pre><code class='css'><c- f>[title] </c-><c- p>{</c-> <c- k>border-bottom</c-><c- p>:</c-> thin dashed<c- p>;</c-> <c- p>}</c-></code></pre>

  </div>

  <hr>

  <p>For longer annotations, the <code id=footnotes:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> element should be used, pointing to an element later
  in the document. The convention is that the contents of the link be a number in square
  brackets.</p>

  <div class=example>

   <p>In this example, a footnote in the dialogue links to a paragraph below the dialogue. The
   paragraph then reciprocally links back to the dialogue, allowing the user to return to the
   location of the footnote.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Announcer: Number 16: The <c- p>&lt;</c-><c- f>i</c-><c- p>&gt;</c->hand<c- p>&lt;/</c-><c- f>i</c-><c- p>&gt;</c->.
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Interviewer: Good evening. I have with me in the studio tonight
Mr Norman St John Polevaulter, who for the past few years has been
contradicting people. Mr Polevaulter, why <c- p>&lt;</c-><c- f>em</c-><c- p>&gt;</c->do<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;</c-> you
contradict people?
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Norman: I don&apos;t. <c- p>&lt;</c-><c- f>sup</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;#fn1&quot;</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;r1&quot;</c-><c- p>&gt;</c->[1]<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>sup</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Interviewer: You told me you did!
<em>...</em>
<c- p>&lt;</c-><c- f>section</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;fn1&quot;</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;#r1&quot;</c-><c- p>&gt;</c->[1]<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> This is, naturally, a lie,
 but paradoxically if it were true he could not say so without
 contradicting the interviewer and thus making it false.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c-></code></pre>

  </div>

  <hr>

  <p>For side notes, longer annotations that apply to entire sections of the text rather than just
  specific words or sentences, the <code id=footnotes:the-aside-element><a href=sections.html#the-aside-element>aside</a></code> element should be used.</p>

  <div class=example>

   <p>In this example, a sidebar is given after a dialogue, giving it some context.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;speaker&quot;</c-><c- p>&gt;</c->Customer<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->: I will not buy this record, it is scratched.
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;speaker&quot;</c-><c- p>&gt;</c->Shopkeeper<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->: I&apos;m sorry?
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;speaker&quot;</c-><c- p>&gt;</c->Customer<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->: I will not buy this record, it is scratched.
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;speaker&quot;</c-><c- p>&gt;</c->Shopkeeper<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->: No no no, this&apos;s&apos;a tobacconist&apos;s.
<c- p>&lt;</c-><c- f>aside</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->In 1970, the British Empire lay in ruins, and foreign
 nationalists frequented the streets — many of them Hungarians
 (not the streets — the foreign nationals). Sadly, Alexander
 Yalt has been publishing incompetently-written phrase books.
<c- p>&lt;/</c-><c- f>aside</c-><c- p>&gt;</c-></code></pre>

  </div>

  <hr>

  <p>For figures or tables, footnotes can be included in the relevant <code id=footnotes:the-figcaption-element><a href=grouping-content.html#the-figcaption-element>figcaption</a></code> or
  <code id=footnotes:the-caption-element><a href=tables.html#the-caption-element>caption</a></code> element, or in surrounding prose.</p>

  <div class=example>

   <p>In this example, a  table has cells with footnotes that are given in prose. A
   <code id=footnotes:the-figure-element><a href=grouping-content.html#the-figure-element>figure</a></code> element is used to give a single legend to the combination of the table and
   its footnotes.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Table 1. Alternative activities for knights.<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Activity
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Location
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Cost
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Dance
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Wherever possible
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> £0<c- p>&lt;</c-><c- f>sup</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;#fn1&quot;</c-><c- p>&gt;</c->1<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>sup</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Routines, chorus scenes<c- p>&lt;</c-><c- f>sup</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;#fn2&quot;</c-><c- p>&gt;</c->2<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>sup</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Undisclosed
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Undisclosed
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Dining<c- p>&lt;</c-><c- f>sup</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;#fn3&quot;</c-><c- p>&gt;</c->3<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>sup</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Camelot
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Cost of ham, jam, and spam<c- p>&lt;</c-><c- f>sup</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;#fn4&quot;</c-><c- p>&gt;</c->4<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>sup</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;fn1&quot;</c-><c- p>&gt;</c->1. Assumed.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;fn2&quot;</c-><c- p>&gt;</c->2. Footwork impeccable.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;fn3&quot;</c-><c- p>&gt;</c->3. Quality described as &quot;well&quot;.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;fn4&quot;</c-><c- p>&gt;</c->4. A lot.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h3 id=disabled-elements><span class=secno>4.15</span> Disabled elements<a href=#disabled-elements class=self-link></a></h3>

  <p>An element is said to be <dfn id=concept-element-disabled>actually disabled</dfn> if it
  is one of the following:</p>

  <ul><li>a <code id=disabled-elements:the-button-element><a href=form-elements.html#the-button-element>button</a></code> element that is <a href=form-control-infrastructure.html#concept-fe-disabled id=disabled-elements:concept-fe-disabled>disabled</a><li>an <code id=disabled-elements:the-input-element><a href=input.html#the-input-element>input</a></code> element that is <a href=form-control-infrastructure.html#concept-fe-disabled id=disabled-elements:concept-fe-disabled-2>disabled</a><li>a <code id=disabled-elements:the-select-element><a href=form-elements.html#the-select-element>select</a></code> element that is <a href=form-control-infrastructure.html#concept-fe-disabled id=disabled-elements:concept-fe-disabled-3>disabled</a><li>a <code id=disabled-elements:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> element that is <a href=form-control-infrastructure.html#concept-fe-disabled id=disabled-elements:concept-fe-disabled-4>disabled</a><li>an <code id=disabled-elements:the-optgroup-element><a href=form-elements.html#the-optgroup-element>optgroup</a></code> element that has a <code id=disabled-elements:attr-optgroup-disabled><a href=form-elements.html#attr-optgroup-disabled>disabled</a></code> attribute<li>an <code id=disabled-elements:the-option-element><a href=form-elements.html#the-option-element>option</a></code> element that is <a href=form-elements.html#concept-option-disabled id=disabled-elements:concept-option-disabled>disabled</a><li>a <code id=disabled-elements:the-fieldset-element><a href=form-elements.html#the-fieldset-element>fieldset</a></code> element that is a <a href=form-elements.html#concept-fieldset-disabled id=disabled-elements:concept-fieldset-disabled>disabled fieldset</a><li>a <a id=disabled-elements:form-associated-custom-element href=custom-elements.html#form-associated-custom-element>form-associated custom element</a> that is
   <a href=form-control-infrastructure.html#concept-fe-disabled id=disabled-elements:concept-fe-disabled-5>disabled</a></ul>

  <p class=note>This definition is used to determine what elements are <a id=disabled-elements:focusable href=interaction.html#focusable>focusable</a> and
  which elements match the <code id=disabled-elements:selector-enabled><a href=#selector-enabled>:enabled</a></code> and
  <code id=disabled-elements:selector-disabled><a href=#selector-disabled>:disabled</a></code> <a href=https://drafts.csswg.org/selectors/#pseudo-class id=disabled-elements:pseudo-class data-x-internal=pseudo-class>pseudo
  classes</a>.</p>


  

  <h3 id=selectors><span class=secno>4.16</span> Matching HTML elements using selectors and CSS<a href=#selectors class=self-link></a></h3>

  <h4 id="case-sensitivity-of-the-css-'attr()'-function"><span class=secno>4.16.1</span> Case-sensitivity of the CSS <a id="case-sensitivity-of-the-css-'attr()'-function:'attr()'" href=https://drafts.csswg.org/css-values/#funcdef-attr data-x-internal="'attr()'">'attr()'</a> function<a href="#case-sensitivity-of-the-css-'attr()'-function" class=self-link></a></h4>

  <p><cite>CSS Values and Units</cite> leaves the case-sensitivity of attribute names for the
  purpose of the <a id="case-sensitivity-of-the-css-'attr()'-function:'attr()'-2" href=https://drafts.csswg.org/css-values/#funcdef-attr data-x-internal="'attr()'">'attr()'</a> function to be defined by the host language.
  <a href=references.html#refsCSSVALUES>[CSSVALUES]</a></p>

  <p>When comparing the attribute name part of a CSS <a id="case-sensitivity-of-the-css-'attr()'-function:'attr()'-3" href=https://drafts.csswg.org/css-values/#funcdef-attr data-x-internal="'attr()'">'attr()'</a> function to the names of
  namespace-less attributes on <a id="case-sensitivity-of-the-css-'attr()'-function:html-elements" href=infrastructure.html#html-elements>HTML elements</a> in <a id="case-sensitivity-of-the-css-'attr()'-function:html-documents" href=https://dom.spec.whatwg.org/#html-document data-x-internal=html-documents>HTML documents</a>, the name
  part of the CSS <a id="case-sensitivity-of-the-css-'attr()'-function:'attr()'-4" href=https://drafts.csswg.org/css-values/#funcdef-attr data-x-internal="'attr()'">'attr()'</a> function must first be <a id="case-sensitivity-of-the-css-'attr()'-function:converted-to-ascii-lowercase" href=https://infra.spec.whatwg.org/#ascii-lowercase data-x-internal=converted-to-ascii-lowercase>converted to ASCII
  lowercase</a>. The same function when compared to other attributes must be compared according
  to its original case. In both cases, to match, the values must be <a id="case-sensitivity-of-the-css-'attr()'-function:identical-to" href=https://infra.spec.whatwg.org/#string-is data-x-internal=identical-to>identical to</a> each
  other (and therefore the comparison is case sensitive).</p>

  <p class=note>This is the same as comparing the name part of a CSS <a id="case-sensitivity-of-the-css-'attr()'-function:attribute-selector" href=https://drafts.csswg.org/selectors/#attribute-selector data-x-internal=attribute-selector>attribute
  selector</a>, specified in the next section.</p>


  <h4 id=case-sensitivity-of-selectors><span class=secno>4.16.2</span> Case-sensitivity of selectors<a href=#case-sensitivity-of-selectors class=self-link></a></h4>

  <p><cite>Selectors</cite> leaves the case-sensitivity of element names, attribute names, and
  attribute values to be defined by the host language. <a href=references.html#refsSELECTORS>[SELECTORS]</a></p>

  <p>When comparing a CSS element <a id=case-sensitivity-of-selectors:type-selector href=https://drafts.csswg.org/selectors/#type-selector data-x-internal=type-selector>type selector</a> to the names of <a id=case-sensitivity-of-selectors:html-elements href=infrastructure.html#html-elements>HTML
  elements</a> in <a id=case-sensitivity-of-selectors:html-documents href=https://dom.spec.whatwg.org/#html-document data-x-internal=html-documents>HTML documents</a>, the CSS element <a id=case-sensitivity-of-selectors:type-selector-2 href=https://drafts.csswg.org/selectors/#type-selector data-x-internal=type-selector>type selector</a> must
  first be <a id=case-sensitivity-of-selectors:converted-to-ascii-lowercase href=https://infra.spec.whatwg.org/#ascii-lowercase data-x-internal=converted-to-ascii-lowercase>converted to ASCII lowercase</a>. The same selector when compared to other
  elements must be compared according to its original case. In both cases, to match, the values must
  be <a id=case-sensitivity-of-selectors:identical-to href=https://infra.spec.whatwg.org/#string-is data-x-internal=identical-to>identical to</a> each other (and therefore the comparison is case sensitive).</p>
  

  <p>When comparing the name part of a CSS <a id=case-sensitivity-of-selectors:attribute-selector href=https://drafts.csswg.org/selectors/#attribute-selector data-x-internal=attribute-selector>attribute selector</a> to the names of
  attributes on <a id=case-sensitivity-of-selectors:html-elements-2 href=infrastructure.html#html-elements>HTML elements</a> in <a id=case-sensitivity-of-selectors:html-documents-2 href=https://dom.spec.whatwg.org/#html-document data-x-internal=html-documents>HTML documents</a>, the name
  part of the CSS <a id=case-sensitivity-of-selectors:attribute-selector-2 href=https://drafts.csswg.org/selectors/#attribute-selector data-x-internal=attribute-selector>attribute selector</a> must first be <a id=case-sensitivity-of-selectors:converted-to-ascii-lowercase-2 href=https://infra.spec.whatwg.org/#ascii-lowercase data-x-internal=converted-to-ascii-lowercase>converted to ASCII
  lowercase</a>. The same selector when compared to other attributes must be compared according
  to its original case. In both cases, the comparison is case-sensitive.</p>
  

  <p><a href=https://drafts.csswg.org/selectors/#attribute-selector id=case-sensitivity-of-selectors:attribute-selector-3 data-x-internal=attribute-selector>Attribute selectors</a> on an <a href=infrastructure.html#html-elements id=case-sensitivity-of-selectors:html-elements-3>HTML element</a> in an <a href=https://dom.spec.whatwg.org/#html-document id=case-sensitivity-of-selectors:html-documents-3 data-x-internal=html-documents>HTML
  document</a> must treat the <em>values</em> of attributes with the following names as
  <a id=case-sensitivity-of-selectors:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a>:</p>

  
  
  <ul class=brief><li><code>accept</code>
   <li><code>accept-charset</code>
   <li><code>align</code>
   <li><code>alink</code>
   <li><code>axis</code>
   <li><code>bgcolor</code>
   <li><code>charset</code>
   <li><code>checked</code>
   <li><code>clear</code>
   <li><code>codetype</code>
   <li><code>color</code>
   <li><code>compact</code>
   <li><code>declare</code>
   <li><code>defer</code>
   <li><code>dir</code>
   <li><code>direction</code> 
   <li><code>disabled</code>
   <li><code>enctype</code>
   <li><code>face</code>
   <li><code>frame</code>
   <li><code>hreflang</code>
   <li><code>http-equiv</code>
   <li><code>lang</code>
   <li><code>language</code>
   <li><code>link</code>
   <li><code>media</code>
   <li><code>method</code>
   <li><code>multiple</code>
   <li><code>nohref</code>
   <li><code>noresize</code>
   <li><code>noshade</code>
   <li><code>nowrap</code>
   <li><code>readonly</code>
   <li><code>rel</code>
   <li><code>rev</code>
   <li><code>rules</code>
   <li><code>scope</code>
   <li><code>scrolling</code>
   <li><code>selected</code>
   <li><code>shape</code>
   <li><code>target</code>
   <li><code>text</code>
   <li><code>type</code>
   <li><code>valign</code>
   <li><code>valuetype</code>
   <li><code>vlink</code>
  </ul>

  <div class=example>
   <p>For example, the selector <code>[bgcolor="#ffffff"]</code> will match any HTML
   element with a <code>bgcolor</code> attribute with values including <code>#ffffff</code>, <code>#FFFFFF</code> and <code>#fffFFF</code>. This
   happens even if <code>bgcolor</code> has no effect for a given element (e.g.,
   <code id=case-sensitivity-of-selectors:the-div-element><a href=grouping-content.html#the-div-element>div</a></code>).</p>

   <p>The selector <code>[type=a s]</code> will match any
   HTML element with a <code>type</code> attribute whose value is <code>a</code>, but not whose value is <code>A</code>, due to the <code>s</code> flag.</p>
  </div>

  <p>All other attribute values and everything else must be treated as entirely <a id=case-sensitivity-of-selectors:identical-to-2 href=https://infra.spec.whatwg.org/#string-is data-x-internal=identical-to>identical
  to</a> each other for the purposes of selector matching. This includes:</p>

  <ul><li><p><a href=https://dom.spec.whatwg.org/#concept-id id=case-sensitivity-of-selectors:concept-id data-x-internal=concept-id>IDs</a> and <a href=https://dom.spec.whatwg.org/#concept-class id=case-sensitivity-of-selectors:concept-class data-x-internal=concept-class>classes</a>
   in <a id=case-sensitivity-of-selectors:no-quirks-mode href=https://dom.spec.whatwg.org/#concept-document-no-quirks data-x-internal=no-quirks-mode>no-quirks mode</a> and <a id=case-sensitivity-of-selectors:limited-quirks-mode href=https://dom.spec.whatwg.org/#concept-document-limited-quirks data-x-internal=limited-quirks-mode>limited-quirks mode</a><li><p>the names of elements not in the <a id=case-sensitivity-of-selectors:html-namespace-2 href=https://infra.spec.whatwg.org/#html-namespace data-x-internal=html-namespace-2>HTML namespace</a><li><p>the names of <a id=case-sensitivity-of-selectors:html-elements-4 href=infrastructure.html#html-elements>HTML elements</a> in <a id=case-sensitivity-of-selectors:xml-documents href=https://dom.spec.whatwg.org/#xml-document data-x-internal=xml-documents>XML documents</a><li><p>the names of attributes of elements not in the <a id=case-sensitivity-of-selectors:html-namespace-2-2 href=https://infra.spec.whatwg.org/#html-namespace data-x-internal=html-namespace-2>HTML namespace</a><li><p>the names of attributes of <a id=case-sensitivity-of-selectors:html-elements-5 href=infrastructure.html#html-elements>HTML elements</a> in <a id=case-sensitivity-of-selectors:xml-documents-2 href=https://dom.spec.whatwg.org/#xml-document data-x-internal=xml-documents>XML documents</a><li><p>the names of attributes that themselves have namespaces</ul>

  <p class=note><cite>Selectors</cite> defines that ID and class selectors (such as <code>#foo</code> and <code>.bar</code>), when matched against elements in documents
  that are in <a id=case-sensitivity-of-selectors:quirks-mode href=https://dom.spec.whatwg.org/#concept-document-quirks data-x-internal=quirks-mode>quirks mode</a>, will be matched in an <a id=case-sensitivity-of-selectors:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a>
  manner. However, this does not apply for attribute selectors with "<code>id</code>" or
  "<code>class</code>" as the name part. The selector <code>[class="foobar"]</code> will treat its value as case-sensitive even in
  <a id=case-sensitivity-of-selectors:quirks-mode-2 href=https://dom.spec.whatwg.org/#concept-document-quirks data-x-internal=quirks-mode>quirks mode</a>.</p>


  <h4 id=pseudo-classes><span class=secno>4.16.3</span> Pseudo-classes<a href=#pseudo-classes class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes title="A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled.">Pseudo-classes</a></div></div>

  <p>There are a number of dynamic selectors that can be used with HTML. This section defines when
  these selectors match HTML elements. <a href=references.html#refsSELECTORS>[SELECTORS]</a> <a href=references.html#refsCSSUI>[CSSUI]</a></p>

  <dl><dt><dfn id=selector-defined data-dfn-type=selector data-noexport=""><code>:defined</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:defined title="The :defined CSS pseudo-class represents any element that has been defined. This includes any standard element built in to the browser, and custom elements that have been successfully defined (i.e. with the CustomElementRegistry.define() method).">:defined</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>63+</span></span><span class="safari yes"><span>Safari</span><span>10+</span></span><span class="chrome yes"><span>Chrome</span><span>54+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>The <code id=pseudo-classes:selector-defined><a href=#selector-defined>:defined</a></code> <a id=pseudo-classes:pseudo-class href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match
    any element that is <a href=https://dom.spec.whatwg.org/#concept-element-defined id=pseudo-classes:concept-element-defined data-x-internal=concept-element-defined>defined</a>.</p>
   <dt><dfn id=selector-link data-dfn-type=selector data-noexport=""><code>:link</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:link title="The :link CSS pseudo-class represents an element that has not yet been visited. It matches every unvisited <a> or <area> element that has an href attribute.">:link</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>3.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>3+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3.2+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>1.5+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><dfn id=selector-visited data-dfn-type=selector data-noexport=""><code>:visited</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:visited title="The :visited CSS pseudo-class applies once the link has been visited by the user. For privacy reasons, the styles that can be modified using this selector are very limited. The :visited pseudo-class applies only <a> and <area> elements that have an href attribute.">:visited</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>3.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>4+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>All <code id=pseudo-classes:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> elements that have an <code id=pseudo-classes:attr-hyperlink-href><a href=links.html#attr-hyperlink-href>href</a></code>
    attribute, and all <code id=pseudo-classes:the-area-element><a href=image-maps.html#the-area-element>area</a></code> elements that have an <code id=pseudo-classes:attr-hyperlink-href-2><a href=links.html#attr-hyperlink-href>href</a></code> attribute, must match one of <code id=pseudo-classes:selector-link><a href=#selector-link>:link</a></code> and <code id=pseudo-classes:selector-visited><a href=#selector-visited>:visited</a></code>.</p>

    <p>Other specifications might apply more specific rules regarding how these elements are to
    match these <a href=https://drafts.csswg.org/selectors/#pseudo-class id=pseudo-classes:pseudo-class-2 data-x-internal=pseudo-class>pseudo-classes</a>, to mitigate some privacy concerns
    that apply with straightforward implementations of this requirement.</p>
   <dt><dfn id=selector-active data-dfn-type=selector data-noexport=""><code>:active</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:active title="The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, &quot;activation&quot; typically starts when the user presses down the primary mouse button.">:active</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>4+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>The <code id=pseudo-classes:selector-active><a href=#selector-active>:active</a></code> <a id=pseudo-classes:pseudo-class-3 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> is defined to
    match an element <q cite=https://drafts.csswg.org/selectors/#the-active-pseudo>while an
    element is <dfn id=concept-selector-active><i>being activated</i></dfn> by the
    user</q>.</p>

    <p>To determine whether a particular element is <i id=pseudo-classes:concept-selector-active><a href=#concept-selector-active>being
    activated</a></i> for the purposes of defining the <code id=pseudo-classes:selector-active-2><a href=#selector-active>:active</a></code>
    <a id=pseudo-classes:pseudo-class-4 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> only, an HTML user agent must use the first relevant entry in the
    following list.</p>

    <dl><dt>If the element is a <code id=pseudo-classes:the-button-element><a href=form-elements.html#the-button-element>button</a></code> element<dt>If the element is an <code id=pseudo-classes:the-input-element><a href=input.html#the-input-element>input</a></code> element whose <code id=pseudo-classes:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#submit-button-state-(type=submit)" id="pseudo-classes:submit-button-state-(type=submit)">Submit Button</a>, <a href="input.html#image-button-state-(type=image)" id="pseudo-classes:image-button-state-(type=image)">Image Button</a>, <a href="input.html#reset-button-state-(type=reset)" id="pseudo-classes:reset-button-state-(type=reset)">Reset
     Button</a>, or <a href="input.html#button-state-(type=button)" id="pseudo-classes:button-state-(type=button)">Button</a> state<dt>If the element is an <code id=pseudo-classes:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code> element that has an <code id=pseudo-classes:attr-hyperlink-href-3><a href=links.html#attr-hyperlink-href>href</a></code> attribute<dt>If the element is an <code id=pseudo-classes:the-area-element-2><a href=image-maps.html#the-area-element>area</a></code> element that has an <code id=pseudo-classes:attr-hyperlink-href-4><a href=links.html#attr-hyperlink-href>href</a></code> attribute<dt>If the element is <a id=pseudo-classes:focusable href=interaction.html#focusable>focusable</a><dd>
      <p>The element is <i id=pseudo-classes:concept-selector-active-2><a href=#concept-selector-active>being activated</a></i> if it is <a href=#in-a-formal-activation-state id=pseudo-classes:in-a-formal-activation-state>in a
      formal activation state</a>.</p>

      <p class=example>For example, if the user is using a keyboard to push a <code id=pseudo-classes:the-button-element-2><a href=form-elements.html#the-button-element>button</a></code>
      element by pressing the space bar, the element would match this <a id=pseudo-classes:pseudo-class-5 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> in
      between the time that the element received the <code id=pseudo-classes:event-keydown><a data-x-internal=event-keydown href=https://w3c.github.io/uievents/#event-type-keydown>keydown</a></code>
      event and the time the element received the <code id=pseudo-classes:event-keyup><a data-x-internal=event-keyup href=https://w3c.github.io/uievents/#event-type-keyup>keyup</a></code> event.</p>
     <dt>If the element is <a href=#being-actively-pointed-at id=pseudo-classes:being-actively-pointed-at>being actively pointed at</a><dd><p>The element is <i id=pseudo-classes:concept-selector-active-3><a href=#concept-selector-active>being activated</a></i>.</dl>

    <p>An element is said to be <dfn id=in-a-formal-activation-state>in a formal activation state</dfn> between the time the user
    begins to indicate an intent to trigger the element's <a id=pseudo-classes:activation-behaviour href=https://dom.spec.whatwg.org/#eventtarget-activation-behavior data-x-internal=activation-behaviour>activation behavior</a> and
    either the time the user stops indicating an intent to trigger the element's <a id=pseudo-classes:activation-behaviour-2 href=https://dom.spec.whatwg.org/#eventtarget-activation-behavior data-x-internal=activation-behaviour>activation
    behavior</a>, or the time the element's <a id=pseudo-classes:activation-behaviour-3 href=https://dom.spec.whatwg.org/#eventtarget-activation-behavior data-x-internal=activation-behaviour>activation behavior</a> has finished
    running, which ever comes first.</p>

    <p>An element is said to be <dfn id=being-actively-pointed-at>being actively pointed at</dfn> while the user indicates the
    element using a pointing device while that pointing device is in the "down" state (e.g. for a
    mouse, between the time the mouse button is pressed and the time it is released; for a finger
    in a multitouch environment, while the finger is touching the display surface).</p>

    <p class=note>Per the definition in <cite>Selectors</cite>, <code id=pseudo-classes:selector-active-3><a href=#selector-active>:active</a></code> also matches <a id=pseudo-classes:flat-tree href=https://drafts.csswg.org/css-scoping/#flat-tree data-x-internal=flat-tree>flat tree</a> ancestors of
    elements that are <i id=pseudo-classes:concept-selector-active-4><a href=#concept-selector-active>being activated</a></i>.
    <a href=references.html#refsSELECTORS>[SELECTORS]</a></p>

    <p>Additionally, any element that is the <a id=pseudo-classes:labeled-control href=forms.html#labeled-control>labeled control</a> of a <code id=pseudo-classes:the-label-element><a href=forms.html#the-label-element>label</a></code>
    element that is currently matching <code id=pseudo-classes:selector-active-4><a href=#selector-active>:active</a></code>, also matches
    <code id=pseudo-classes:selector-active-5><a href=#selector-active>:active</a></code>. (But, it does not count as being <i id=pseudo-classes:concept-selector-active-5><a href=#concept-selector-active>being activated</a></i>.)</p>
   <dt><dfn id=selector-hover data-dfn-type=selector data-noexport=""><code>:hover</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:hover title="The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).">:hover</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>4+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>4+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>The <code id=pseudo-classes:selector-hover><a href=#selector-hover>:hover</a></code> <a id=pseudo-classes:pseudo-class-6 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> is defined to
    match an element <q cite=https://drafts.csswg.org/selectors/#the-hover-pseudo>while the user
    <dfn id=concept-selector-hover><i>designates</i></dfn> an element with a pointing
    device</q>. For the purposes of defining the <code id=pseudo-classes:selector-hover-2><a href=#selector-hover>:hover</a></code>
    <a id=pseudo-classes:pseudo-class-7 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> only, an HTML user agent must consider an element as being one that
    the user <i id=pseudo-classes:concept-selector-hover><a href=#concept-selector-hover>designates</a></i> if it is an element that the user
    indicates using a pointing device.</p>

    <p class=note>Per the definition in <cite>Selectors</cite>, <code id=pseudo-classes:selector-hover-3><a href=#selector-hover>:hover</a></code> also matches <a id=pseudo-classes:flat-tree-2 href=https://drafts.csswg.org/css-scoping/#flat-tree data-x-internal=flat-tree>flat tree</a> ancestors of elements
    that are <i id=pseudo-classes:concept-selector-hover-2><a href=#concept-selector-hover>designated</a></i>. <a href=references.html#refsSELECTORS>[SELECTORS]</a></p>

    <p>Additionally, any element that is the <a id=pseudo-classes:labeled-control-2 href=forms.html#labeled-control>labeled control</a> of a <code id=pseudo-classes:the-label-element-2><a href=forms.html#the-label-element>label</a></code>
    element that is currently matching <code id=pseudo-classes:selector-hover-4><a href=#selector-hover>:hover</a></code>, also matches
    <code id=pseudo-classes:selector-hover-5><a href=#selector-hover>:hover</a></code>. (But, it does not count as being <i id=pseudo-classes:concept-selector-hover-3><a href=#concept-selector-hover>designated</a></i>.)</p>



    <div class=example>
     <p>Consider in particular a fragment such as:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>c</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>a</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>span</c-> <c- e>id</c-><c- o>=</c-><c- s>b</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>c</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

     <p>If the user designates the element with ID "<code>a</code>" with their pointing
     device, then the <code id=pseudo-classes:the-p-element><a href=grouping-content.html#the-p-element>p</a></code> element (and all its ancestors not shown in the snippet
     above), the <code id=pseudo-classes:the-label-element-3><a href=forms.html#the-label-element>label</a></code> element, the element with ID "<code>a</code>", and
     the element with ID "<code>c</code>" will match the <code id=pseudo-classes:selector-hover-6><a href=#selector-hover>:hover</a></code> <a id=pseudo-classes:pseudo-class-8 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a>. The element with ID "<code>a</code>" matches it by being <i id=pseudo-classes:concept-selector-hover-4><a href=#concept-selector-hover>designated</a></i>; the
     <code id=pseudo-classes:the-label-element-4><a href=forms.html#the-label-element>label</a></code> and <code id=pseudo-classes:the-p-element-2><a href=grouping-content.html#the-p-element>p</a></code> elements match it because of the condition in
     <cite>Selectors</cite> about flat tree ancestors; and the element with ID "<code>c</code>" matches it through the additional condition above on <a href=forms.html#labeled-control id=pseudo-classes:labeled-control-3>labeled controls</a> (i.e., its <code id=pseudo-classes:the-label-element-5><a href=forms.html#the-label-element>label</a></code> element matches <code id=pseudo-classes:selector-hover-7><a href=#selector-hover>:hover</a></code>). However, the element with ID "<code>b</code>" does <em>not</em> match <code id=pseudo-classes:selector-hover-8><a href=#selector-hover>:hover</a></code>: its
     flat tree descendant is not designated, even though that flat tree descendant matches <code id=pseudo-classes:selector-hover-9><a href=#selector-hover>:hover</a></code>.</p>
    </div>
   <dt><dfn id=selector-focus data-dfn-type=selector data-noexport=""><code>:focus</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:focus title="The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.">:focus</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>7+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>For the purposes of the CSS <code id=pseudo-classes:selector-focus><a href=#selector-focus>:focus</a></code>
    <a id=pseudo-classes:pseudo-class-9 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a>, an <dfn id=element-has-the-focus>element has the focus</dfn> when:</p>

    <ul><li><p>it is not itself a <a id=pseudo-classes:navigable-container href=document-sequences.html#navigable-container>navigable container</a>; and<li>
      <p>any of the following are true:</p>
      <ul><li><p>it is one of the elements listed in the <a href=interaction.html#current-focus-chain-of-a-top-level-traversable id=pseudo-classes:current-focus-chain-of-a-top-level-traversable>current focus chain of the top-level traversable</a>; or<li><p>its <a href=https://dom.spec.whatwg.org/#concept-element-shadow-root id=pseudo-classes:concept-element-shadow-root data-x-internal=concept-element-shadow-root>shadow root</a>
       <var>shadowRoot</var> is not null and <var>shadowRoot</var> is the <a id=pseudo-classes:root href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a> of at
       least one element that <a href=#element-has-the-focus id=pseudo-classes:element-has-the-focus>has the focus</a>.</ul>
     </ul>
   <dt><dfn id=selector-target data-dfn-type=selector data-noexport=""><code>:target</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:target title="The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment.">:target</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1.3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>2+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>2+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>For the purposes of the CSS <code id=pseudo-classes:selector-target><a href=#selector-target>:target</a></code>
    <a id=pseudo-classes:pseudo-class-10 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a>, the <code id=pseudo-classes:document><a href=dom.html#document>Document</a></code>'s <i>target elements</i> are a list
    containing the <code id=pseudo-classes:document-2><a href=dom.html#document>Document</a></code>'s <a id=pseudo-classes:target-element href=browsing-the-web.html#target-element>target element</a>, if it is not null, or
    containing no elements, if it is. <a href=references.html#refsSELECTORS>[SELECTORS]</a></p>
   <dt><dfn id=selector-popover-open data-dfn-type=selector data-noexport=""><code>:popover-open</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:popover-open title="The :popover-open CSS pseudo-class represents a popover element (i.e. one with a popover attribute) that is in the showing state. You can use this to apply style to popover elements only when they are shown.">:popover-open</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 114+</span></span><span class="safari yes"><span>Safari</span><span>preview+</span></span><span class="chrome yes"><span>Chrome</span><span>114+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>114+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>The <code id=pseudo-classes:selector-popover-open><a href=#selector-popover-open>:popover-open</a></code> <a id=pseudo-classes:pseudo-class-11 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> is
    defined to match any <a href=infrastructure.html#html-elements id=pseudo-classes:html-elements>HTML element</a> whose <code id=pseudo-classes:attr-popover><a href=popover.html#attr-popover>popover</a></code> attribute is not in the <a href=popover.html#attr-popover-none-state id=pseudo-classes:attr-popover-none-state>No Popover</a> state and whose <a id=pseudo-classes:popover-visibility-state href=popover.html#popover-visibility-state>popover visibility
    state</a> is <a href=popover.html#popover-showing-state id=pseudo-classes:popover-showing-state>showing</a>.</p>
   <dt><dfn id=selector-enabled data-dfn-type=selector data-noexport=""><code>:enabled</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled title="The :enabled CSS pseudo-class represents any enabled element. An element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has a disabled state, in which it can't be activated or accept focus.">:enabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>2+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>The <code id=pseudo-classes:selector-enabled><a href=#selector-enabled>:enabled</a></code> <a id=pseudo-classes:pseudo-class-12 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match any
    <code id=pseudo-classes:the-button-element-3><a href=form-elements.html#the-button-element>button</a></code>, <code id=pseudo-classes:the-input-element-2><a href=input.html#the-input-element>input</a></code>, <code id=pseudo-classes:the-select-element><a href=form-elements.html#the-select-element>select</a></code>, <code id=pseudo-classes:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code>,
    <code id=pseudo-classes:the-optgroup-element><a href=form-elements.html#the-optgroup-element>optgroup</a></code>, <code id=pseudo-classes:the-option-element><a href=form-elements.html#the-option-element>option</a></code>, <code id=pseudo-classes:the-fieldset-element><a href=form-elements.html#the-fieldset-element>fieldset</a></code> element, or
    <a id=pseudo-classes:form-associated-custom-element href=custom-elements.html#form-associated-custom-element>form-associated custom element</a> that is not <a href=#concept-element-disabled id=pseudo-classes:concept-element-disabled>actually disabled</a>.</p>
   <dt><dfn id=selector-disabled data-dfn-type=selector data-noexport=""><code>:disabled</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled title="The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.">:disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>2+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>The <code id=pseudo-classes:selector-disabled><a href=#selector-disabled>:disabled</a></code> <a id=pseudo-classes:pseudo-class-13 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match
    any element that is <a href=#concept-element-disabled id=pseudo-classes:concept-element-disabled-2>actually disabled</a>.</p>
   <dt><dfn id=selector-checked data-dfn-type=selector data-noexport=""><code>:checked</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:checked title="The :checked CSS pseudo-class selector represents any radio (<input type=&quot;radio&quot;>), checkbox (<input type=&quot;checkbox&quot;>), or option (<option> in a <select>) element that is checked or toggled to an on state.">:checked</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>18+</span></span><span class="webview_android yes"><span>WebView Android</span><span>2+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>The <code id=pseudo-classes:selector-checked><a href=#selector-checked>:checked</a></code> <a id=pseudo-classes:pseudo-class-14 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match any
    element falling into one of the following categories:</p>

    <ul><li><code id=pseudo-classes:the-input-element-3><a href=input.html#the-input-element>input</a></code> elements whose <code id=pseudo-classes:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute is in
     the <a href="input.html#checkbox-state-(type=checkbox)" id="pseudo-classes:checkbox-state-(type=checkbox)">Checkbox</a> state and whose <a href=form-control-infrastructure.html#concept-fe-checked id=pseudo-classes:concept-fe-checked>checkedness</a> state is true<li><code id=pseudo-classes:the-input-element-4><a href=input.html#the-input-element>input</a></code> elements whose <code id=pseudo-classes:attr-input-type-3><a href=input.html#attr-input-type>type</a></code> attribute is in
     the <a href="input.html#radio-button-state-(type=radio)" id="pseudo-classes:radio-button-state-(type=radio)">Radio Button</a> state and whose <a href=form-control-infrastructure.html#concept-fe-checked id=pseudo-classes:concept-fe-checked-2>checkedness</a> state is true<li><code id=pseudo-classes:the-option-element-2><a href=form-elements.html#the-option-element>option</a></code> elements whose <a href=form-elements.html#concept-option-selectedness id=pseudo-classes:concept-option-selectedness>selectedness</a> is true</ul>
   <dt><dfn id=selector-indeterminate data-dfn-type=selector data-noexport=""><code>:indeterminate</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate title="The :indeterminate CSS pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate <progress> elements.">:indeterminate</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>2+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>The <code id=pseudo-classes:selector-indeterminate><a href=#selector-indeterminate>:indeterminate</a></code> <a id=pseudo-classes:pseudo-class-15 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a>
    must match any element falling into one of the following categories:</p>

    <ul><li><code id=pseudo-classes:the-input-element-5><a href=input.html#the-input-element>input</a></code> elements whose <code id=pseudo-classes:attr-input-type-4><a href=input.html#attr-input-type>type</a></code> attribute is in
     the <a href="input.html#checkbox-state-(type=checkbox)" id="pseudo-classes:checkbox-state-(type=checkbox)-2">Checkbox</a> state and whose <code id=pseudo-classes:dom-input-indeterminate><a href=input.html#dom-input-indeterminate>indeterminate</a></code> IDL attribute is set to true<li><code id=pseudo-classes:the-input-element-6><a href=input.html#the-input-element>input</a></code> elements whose <code id=pseudo-classes:attr-input-type-5><a href=input.html#attr-input-type>type</a></code> attribute is in
     the <a href="input.html#radio-button-state-(type=radio)" id="pseudo-classes:radio-button-state-(type=radio)-2">Radio Button</a> state and whose <a id=pseudo-classes:radio-button-group href=input.html#radio-button-group>radio button
     group</a> contains no <code id=pseudo-classes:the-input-element-7><a href=input.html#the-input-element>input</a></code> elements whose <a href=form-control-infrastructure.html#concept-fe-checked id=pseudo-classes:concept-fe-checked-3>checkedness</a> state is true.<li><code id=pseudo-classes:the-progress-element><a href=form-elements.html#the-progress-element>progress</a></code> elements with no <code id=pseudo-classes:attr-progress-value><a href=form-elements.html#attr-progress-value>value</a></code>
     content attribute</ul>
   <dt><dfn id=selector-default data-dfn-type=selector data-noexport=""><code>:default</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:default title="The :default CSS pseudo-class selects form elements that are the default in a group of related elements.">:default</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera yes"><span>Opera</span><span>10+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>The <code id=pseudo-classes:selector-default><a href=#selector-default>:default</a></code> <a id=pseudo-classes:pseudo-class-16 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match any
    element falling into one of the following categories:</p>

    <ul><li><a href=forms.html#concept-submit-button id=pseudo-classes:concept-submit-button>Submit buttons</a> that are <a href=form-control-infrastructure.html#default-button id=pseudo-classes:default-button>default buttons</a> of their <a id=pseudo-classes:form-owner href=form-control-infrastructure.html#form-owner>form owner</a>.<li><code id=pseudo-classes:the-input-element-8><a href=input.html#the-input-element>input</a></code> elements to which the <code id=pseudo-classes:attr-input-checked><a href=input.html#attr-input-checked>checked</a></code>
     attribute applies and that have a <code id=pseudo-classes:attr-input-checked-2><a href=input.html#attr-input-checked>checked</a></code>
     attribute<li><code id=pseudo-classes:the-option-element-3><a href=form-elements.html#the-option-element>option</a></code> elements that have a <code id=pseudo-classes:attr-option-selected><a href=form-elements.html#attr-option-selected>selected</a></code>
     attribute</ul>
   <dt><dfn id=selector-placeholder-shown data-dfn-type=selector data-noexport=""><code>:placeholder-shown</code></dfn><dd>
    <p>The <code id=pseudo-classes:selector-placeholder-shown><a href=#selector-placeholder-shown>:placeholder-shown</a></code>
    <a id=pseudo-classes:pseudo-class-17 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match any element falling into one of the following
    categories:</p>

    <ul><li><code id=pseudo-classes:the-input-element-9><a href=input.html#the-input-element>input</a></code> elements that have a <code id=pseudo-classes:attr-input-placeholder><a href=input.html#attr-input-placeholder>placeholder</a></code> attribute whose value is currently being
     presented to the user<li><code id=pseudo-classes:the-textarea-element-2><a href=form-elements.html#the-textarea-element>textarea</a></code> elements that have a <code id=pseudo-classes:attr-textarea-placeholder><a href=form-elements.html#attr-textarea-placeholder>placeholder</a></code> attribute whose value is currently being
     presented to the user</ul>
   <dt><dfn id=selector-valid data-dfn-type=selector data-noexport=""><code>:valid</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:valid title="The :valid CSS pseudo-class represents any <input> or other <form> element whose contents validate successfully. This allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly.">:valid</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera yes"><span>Opera</span><span>10+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>The <code id=pseudo-classes:selector-valid><a href=#selector-valid>:valid</a></code> <a id=pseudo-classes:pseudo-class-18 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match any
    element falling into one of the following categories:</p>

    <ul><li>elements that are <a href=form-control-infrastructure.html#candidate-for-constraint-validation id=pseudo-classes:candidate-for-constraint-validation>candidates for
     constraint validation</a> and that <a href=form-control-infrastructure.html#concept-fv-valid id=pseudo-classes:concept-fv-valid>satisfy their
     constraints</a><li><code id=pseudo-classes:the-form-element><a href=forms.html#the-form-element>form</a></code> elements that are not the <a id=pseudo-classes:form-owner-2 href=form-control-infrastructure.html#form-owner>form owner</a> of any elements that
     themselves are <a href=form-control-infrastructure.html#candidate-for-constraint-validation id=pseudo-classes:candidate-for-constraint-validation-2>candidates for constraint
     validation</a> but do not <a href=form-control-infrastructure.html#concept-fv-valid id=pseudo-classes:concept-fv-valid-2>satisfy their
     constraints</a><li><code id=pseudo-classes:the-fieldset-element-2><a href=form-elements.html#the-fieldset-element>fieldset</a></code> elements that have no descendant elements that themselves are <a href=form-control-infrastructure.html#candidate-for-constraint-validation id=pseudo-classes:candidate-for-constraint-validation-3>candidates for constraint validation</a> but do
     not <a href=form-control-infrastructure.html#concept-fv-valid id=pseudo-classes:concept-fv-valid-3>satisfy their constraints</a></ul>
   <dt><dfn id=selector-invalid data-dfn-type=selector data-noexport=""><code>:invalid</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid title="The :invalid CSS pseudo-class represents any <form>, <fieldset>, <input> or other <form> element whose contents fail to validate.">:invalid</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera yes"><span>Opera</span><span>10+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>The <code id=pseudo-classes:selector-invalid><a href=#selector-invalid>:invalid</a></code> <a id=pseudo-classes:pseudo-class-19 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match any
    element falling into one of the following categories:</p>

    <ul><li>elements that are <a href=form-control-infrastructure.html#candidate-for-constraint-validation id=pseudo-classes:candidate-for-constraint-validation-4>candidates for
     constraint validation</a> but that do not <a href=form-control-infrastructure.html#concept-fv-valid id=pseudo-classes:concept-fv-valid-4>satisfy their
     constraints</a><li><code id=pseudo-classes:the-form-element-2><a href=forms.html#the-form-element>form</a></code> elements that are the <a id=pseudo-classes:form-owner-3 href=form-control-infrastructure.html#form-owner>form owner</a> of one or more elements
     that themselves are <a href=form-control-infrastructure.html#candidate-for-constraint-validation id=pseudo-classes:candidate-for-constraint-validation-5>candidates for constraint
     validation</a> but do not <a href=form-control-infrastructure.html#concept-fv-valid id=pseudo-classes:concept-fv-valid-5>satisfy their
     constraints</a><li><code id=pseudo-classes:the-fieldset-element-3><a href=form-elements.html#the-fieldset-element>fieldset</a></code> elements that have of one or more descendant elements that themselves
     are <a href=form-control-infrastructure.html#candidate-for-constraint-validation id=pseudo-classes:candidate-for-constraint-validation-6>candidates for constraint
     validation</a> but do not <a href=form-control-infrastructure.html#concept-fv-valid id=pseudo-classes:concept-fv-valid-6>satisfy their
     constraints</a></ul>
   <dt><dfn id=selector-user-valid data-dfn-type=selector data-noexport=""><code>:user-valid</code></dfn><dd>
    <p>The <code id=pseudo-classes:selector-user-valid><a href=#selector-user-valid>:user-valid</a></code> <a id=pseudo-classes:pseudo-class-20 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must
    match <code id=pseudo-classes:the-input-element-10><a href=input.html#the-input-element>input</a></code>, <code id=pseudo-classes:the-textarea-element-3><a href=form-elements.html#the-textarea-element>textarea</a></code>, and <code id=pseudo-classes:the-select-element-2><a href=form-elements.html#the-select-element>select</a></code> elements whose
    <a id=pseudo-classes:user-validity href=form-control-infrastructure.html#user-validity>user validity</a> is true, are
    <a href=form-control-infrastructure.html#candidate-for-constraint-validation id=pseudo-classes:candidate-for-constraint-validation-7>candidates for constraint validation</a>,
    and that <a href=form-control-infrastructure.html#concept-fv-valid id=pseudo-classes:concept-fv-valid-7>satisfy their constraints</a>.</p>
   <dt><dfn id=selector-user-invalid data-dfn-type=selector data-noexport=""><code>:user-invalid</code></dfn><dd>
    <p>The <code id=pseudo-classes:selector-user-invalid><a href=#selector-user-invalid>:user-invalid</a></code> <a id=pseudo-classes:pseudo-class-21 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must
    match <code id=pseudo-classes:the-input-element-11><a href=input.html#the-input-element>input</a></code>, <code id=pseudo-classes:the-textarea-element-4><a href=form-elements.html#the-textarea-element>textarea</a></code>, and <code id=pseudo-classes:the-select-element-3><a href=form-elements.html#the-select-element>select</a></code> elements whose
    <a id=pseudo-classes:user-validity-2 href=form-control-infrastructure.html#user-validity>user validity</a> is true, are
    <a href=form-control-infrastructure.html#candidate-for-constraint-validation id=pseudo-classes:candidate-for-constraint-validation-8>candidates for constraint validation</a>
    but do not <a href=form-control-infrastructure.html#concept-fv-valid id=pseudo-classes:concept-fv-valid-8>satisfy their constraints</a>.</p>
   <dt><dfn id=selector-in-range data-dfn-type=selector data-noexport=""><code>:in-range</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range title="The :in-range CSS pseudo-class represents an <input> element whose current value is within the range limits specified by the min and max attributes.">:in-range</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>29+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>13+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>16+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>2.2+</span></span><span class="samsunginternet_android yes"><span>Samsung Internet</span><span>1.0+</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><dd>
    <p>The <code id=pseudo-classes:selector-in-range><a href=#selector-in-range>:in-range</a></code> <a id=pseudo-classes:pseudo-class-22 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match
    all elements that are <a href=form-control-infrastructure.html#candidate-for-constraint-validation id=pseudo-classes:candidate-for-constraint-validation-9>candidates for
    constraint validation</a>, <a id=pseudo-classes:have-range-limitations href=input.html#have-range-limitations>have range limitations</a>, and that are neither
    <a id=pseudo-classes:suffering-from-an-underflow href=form-control-infrastructure.html#suffering-from-an-underflow>suffering from an underflow</a> nor <a id=pseudo-classes:suffering-from-an-overflow href=form-control-infrastructure.html#suffering-from-an-overflow>suffering from an overflow</a>.</p>
   <dt><dfn id=selector-out-of-range data-dfn-type=selector data-noexport=""><code>:out-of-range</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range title="The :out-of-range CSS pseudo-class represents an <input> element whose current value is outside the range limits specified by the min and max attributes.">:out-of-range</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>29+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>13+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>16+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>2.2+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><dd>
    <p>The <code id=pseudo-classes:selector-out-of-range><a href=#selector-out-of-range>:out-of-range</a></code> <a id=pseudo-classes:pseudo-class-23 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must
    match all elements that are <a href=form-control-infrastructure.html#candidate-for-constraint-validation id=pseudo-classes:candidate-for-constraint-validation-10>candidates for
    constraint validation</a>, <a id=pseudo-classes:have-range-limitations-2 href=input.html#have-range-limitations>have range limitations</a>, and that are either
    <a id=pseudo-classes:suffering-from-an-underflow-2 href=form-control-infrastructure.html#suffering-from-an-underflow>suffering from an underflow</a> or <a id=pseudo-classes:suffering-from-an-overflow-2 href=form-control-infrastructure.html#suffering-from-an-overflow>suffering from an overflow</a>.</p>
   <dt><dfn id=selector-required data-dfn-type=selector data-noexport=""><code>:required</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:required title="The :required CSS pseudo-class represents any <input>, <select>, or <textarea> element that has the required attribute set on it.">:required</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera yes"><span>Opera</span><span>10+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4.3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>The <code id=pseudo-classes:selector-required><a href=#selector-required>:required</a></code> <a id=pseudo-classes:pseudo-class-24 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match
    any element falling into one of the following categories:</p>

    <ul><li><code id=pseudo-classes:the-input-element-12><a href=input.html#the-input-element>input</a></code> elements that are <i id=pseudo-classes:concept-input-required><a href=input.html#concept-input-required>required</a></i><li><code id=pseudo-classes:the-select-element-4><a href=form-elements.html#the-select-element>select</a></code> elements that have a <code id=pseudo-classes:attr-select-required><a href=form-elements.html#attr-select-required>required</a></code>
     attribute<li><code id=pseudo-classes:the-textarea-element-5><a href=form-elements.html#the-textarea-element>textarea</a></code> elements that have a <code id=pseudo-classes:attr-textarea-required><a href=form-elements.html#attr-textarea-required>required</a></code> attribute</ul>
   <dt><dfn id=selector-optional data-dfn-type=selector data-noexport=""><code>:optional</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:optional title="The :optional CSS pseudo-class represents any <input>, <select>, or <textarea> element that does not have the required attribute set on it.">:optional</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera yes"><span>Opera</span><span>10+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>The <code id=pseudo-classes:selector-optional><a href=#selector-optional>:optional</a></code> <a id=pseudo-classes:pseudo-class-25 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match
    any element falling into one of the following categories:</p>

    <ul><li><code id=pseudo-classes:the-input-element-13><a href=input.html#the-input-element>input</a></code> elements to which the <code id=pseudo-classes:attr-input-required><a href=input.html#attr-input-required>required</a></code>
     attribute applies that are not <i id=pseudo-classes:concept-input-required-2><a href=input.html#concept-input-required>required</a></i><li><code id=pseudo-classes:the-select-element-5><a href=form-elements.html#the-select-element>select</a></code> elements that do not have a <code id=pseudo-classes:attr-select-required-2><a href=form-elements.html#attr-select-required>required</a></code> attribute<li><code id=pseudo-classes:the-textarea-element-6><a href=form-elements.html#the-textarea-element>textarea</a></code> elements that do not have a <code id=pseudo-classes:attr-textarea-required-2><a href=form-elements.html#attr-textarea-required>required</a></code> attribute</ul>
   <dt><dfn id=selector-autofill data-dfn-type=selector data-noexport=""><code>:autofill</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill title="The :autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browser. The class stops matching if the user edits the field.">:autofill</a><div class=support><span class="firefox yes"><span>Firefox</span><span>86+</span></span><span class="safari yes"><span>Safari</span><span>15+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires a prefix or alternative name.">🔰 1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires a prefix or alternative name.">🔰 79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>15+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><dfn id=selector-webkit-autofill data-dfn-type=selector data-noexport=""><code>:-webkit-autofill</code></dfn><dd>
    <p>The <code id=pseudo-classes:selector-autofill><a href=#selector-autofill>:autofill</a></code> and <code id=pseudo-classes:selector-webkit-autofill><a href=#selector-webkit-autofill>:-webkit-autofill</a></code> <a href=https://drafts.csswg.org/selectors/#pseudo-class id=pseudo-classes:pseudo-class-26 data-x-internal=pseudo-class>pseudo-classes</a> must match <code id=pseudo-classes:the-input-element-14><a href=input.html#the-input-element>input</a></code> elements which have
    been autofilled by user agent. These pseudo-classes must stop matching if the user edits the
    autofilled field.</p>

    <p class=note>One way such autofilling might happen is via the <code id=pseudo-classes:attr-fe-autocomplete><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code> attribute, but user agents could autofill even
    without that attribute being involved.</p>
   <dt><dfn id=selector-read-only data-dfn-type=selector data-noexport=""><code>:read-only</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only title="The :read-only CSS pseudo-class represents an element (such as input or textarea) that is not editable by the user.">:read-only</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>78+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>13+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span title="Requires a prefix or alternative name.">🔰 4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dt><dfn id=selector-read-write data-dfn-type=selector data-noexport=""><code>:read-write</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write title="The :read-write CSS pseudo-class represents an element (such as input or textarea) that is editable by the user.">:read-write</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>78+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>13+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span title="Requires a prefix or alternative name.">🔰 4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>The <code id=pseudo-classes:selector-read-write><a href=#selector-read-write>:read-write</a></code> <a id=pseudo-classes:pseudo-class-27 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must
    match any element falling into one of the following categories, which for the purposes of
    Selectors are thus considered <i>user-alterable</i>: <a href=references.html#refsSELECTORS>[SELECTORS]</a></p>

    <ul><li><code id=pseudo-classes:the-input-element-15><a href=input.html#the-input-element>input</a></code> elements to which the <code id=pseudo-classes:attr-input-readonly><a href=input.html#attr-input-readonly>readonly</a></code>
     attribute applies, and that are <i id=pseudo-classes:concept-fe-mutable><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i> (i.e. that do not
     have the <code id=pseudo-classes:attr-input-readonly-2><a href=input.html#attr-input-readonly>readonly</a></code> attribute specified and that are not
     <a href=form-control-infrastructure.html#concept-fe-disabled id=pseudo-classes:concept-fe-disabled>disabled</a>)<li><code id=pseudo-classes:the-textarea-element-7><a href=form-elements.html#the-textarea-element>textarea</a></code> elements that do not have a <code id=pseudo-classes:attr-textarea-readonly><a href=form-elements.html#attr-textarea-readonly>readonly</a></code> attribute, and that are not <a href=form-control-infrastructure.html#concept-fe-disabled id=pseudo-classes:concept-fe-disabled-2>disabled</a><li>elements that are <a href=interaction.html#editing-host id=pseudo-classes:editing-host>editing hosts</a> or <a id=pseudo-classes:editable href=https://w3c.github.io/editing/docs/execCommand/#editable data-x-internal=editable>editable</a>
     and are neither <code id=pseudo-classes:the-input-element-16><a href=input.html#the-input-element>input</a></code> elements nor <code id=pseudo-classes:the-textarea-element-8><a href=form-elements.html#the-textarea-element>textarea</a></code> elements</ul>

    <p>The <code id=pseudo-classes:selector-read-only><a href=#selector-read-only>:read-only</a></code> <a id=pseudo-classes:pseudo-class-28 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match
    all other <a id=pseudo-classes:html-elements-2 href=infrastructure.html#html-elements>HTML elements</a>.</p>
   <dt><dfn id=selector-modal data-dfn-type=selector data-noexport=""><code>:modal</code></dfn><dd>
    <p>The <code id=pseudo-classes:selector-modal><a href=#selector-modal>:modal</a></code> <a id=pseudo-classes:pseudo-class-29 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match any
    element falling into one of the following categories:</p>

    <ul><li><code id=pseudo-classes:the-dialog-element><a href=interactive-elements.html#the-dialog-element>dialog</a></code> elements whose <a id=pseudo-classes:is-modal href=interactive-elements.html#is-modal>is modal</a> is true<li>elements whose <a id=pseudo-classes:fullscreen-flag href=https://fullscreen.spec.whatwg.org/#fullscreen-flag data-x-internal=fullscreen-flag>fullscreen flag</a> is true</ul>
   <dt><dfn id=selector-ltr data-dfn-type=selector data-noexport=""><code>:dir(ltr)</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:dir title="The :dir() CSS pseudo-class matches elements based on the directionality of the text contained in them.">:dir</a><div class=support><span class="firefox yes"><span>Firefox</span><span>49+</span></span><span class="safari yes"><span>Safari</span><span>16.4+</span></span><span class="chrome no"><span>Chrome</span><span>No</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink no"><span>Edge</span><span>No</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>The <code id=pseudo-classes:selector-ltr><a href=#selector-ltr>:dir(ltr)</a></code> <a id=pseudo-classes:pseudo-class-30 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match all
    elements whose <a href=dom.html#the-directionality id=pseudo-classes:the-directionality>directionality</a> is '<a href=dom.html#concept-ltr id=pseudo-classes:concept-ltr>ltr</a>'.</p>
   <dt><dfn id=selector-rtl data-dfn-type=selector data-noexport=""><code>:dir(rtl)</code></dfn><dd>
    <p>The <code id=pseudo-classes:selector-rtl><a href=#selector-rtl>:dir(rtl)</a></code> <a id=pseudo-classes:pseudo-class-31 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match all
    elements whose <a href=dom.html#the-directionality id=pseudo-classes:the-directionality-2>directionality</a> is '<a href=dom.html#concept-rtl id=pseudo-classes:concept-rtl>rtl</a>'.</p>
   <dt><dfn id=selector-custom data-dfn-type=selector data-noexport="">Custom state pseudo-class</dfn><dd>
    <p>The <code id=pseudo-classes:selector-custom><a href=#selector-custom>:state(<var>identifier</var>)</a></code> pseudo-class must
    match all <a id=pseudo-classes:custom-element href=custom-elements.html#custom-element>custom element</a>s whose <a id=pseudo-classes:states-set href=custom-elements.html#states-set>states set</a>'s <a id=pseudo-classes:set-entries href=https://webidl.spec.whatwg.org/#dfn-set-entries data-x-internal=set-entries>set entries</a>
    contains <var>identifier</var>.</p>
   <dt><dfn id=selector-heading data-dfn-type=selector data-noexport="">:heading</dfn><dd><p>The <code id=pseudo-classes:selector-heading><a href=#selector-heading>:heading</a></code> pseudo-class must match all
   <code id=pseudo-classes:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>, <code id=pseudo-classes:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-2><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>, <code id=pseudo-classes:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-3><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code id=pseudo-classes:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-4><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>, <code id=pseudo-classes:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-5><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>, and
   <code id=pseudo-classes:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-6><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements.<dt><dfn id=selector-heading-functional data-dfn-type=selector data-noexport="">:heading(<var>integer</var>#)</dfn><dd><p>The <code id=pseudo-classes:selector-heading-functional><a href=#selector-heading-functional>:heading(<var>integer</var>#)</a></code>
   pseudo-class must match all <code id=pseudo-classes:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-7><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>, <code id=pseudo-classes:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-8><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>, <code id=pseudo-classes:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-9><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code id=pseudo-classes:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-10><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>,
   <code id=pseudo-classes:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-11><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>, and <code id=pseudo-classes:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-12><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements that have a <a id=pseudo-classes:heading-level href=sections.html#heading-level>heading level</a> of
   <var>integer</var>. <a href=references.html#refsCSSSYNTAX>[CSSSYNTAX]</a> <a href=references.html#refsCSSVALUES>[CSSVALUES]</a><dt><dfn id=selector-playing data-dfn-type=selector data-noexport=""><code>:playing</code></dfn><dd>
    <p>The <code id=pseudo-classes:selector-playing><a href=#selector-playing>:playing</a></code> <a id=pseudo-classes:pseudo-class-32 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match all
    <a href=media.html#media-element id=pseudo-classes:media-element>media elements</a> whose <code id=pseudo-classes:dom-media-paused><a href=media.html#dom-media-paused>paused</a></code> attribute is false.</p>
    
   <dt><dfn id=selector-paused data-dfn-type=selector data-noexport=""><code>:paused</code></dfn><dd>
    <p>The <code id=pseudo-classes:selector-paused><a href=#selector-paused>:paused</a></code> <a id=pseudo-classes:pseudo-class-33 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match all
    <a href=media.html#media-element id=pseudo-classes:media-element-2>media elements</a> whose <code id=pseudo-classes:dom-media-paused-2><a href=media.html#dom-media-paused>paused</a></code> attribute is true.</p>
    
   <dt><dfn id=selector-seeking data-dfn-type=selector data-noexport=""><code>:seeking</code></dfn><dd>
    <p>The <code id=pseudo-classes:selector-seeking><a href=#selector-seeking>:seeking</a></code> <a id=pseudo-classes:pseudo-class-34 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match all
    <a href=media.html#media-element id=pseudo-classes:media-element-3>media elements</a> whose <code id=pseudo-classes:dom-media-seeking><a href=media.html#dom-media-seeking>seeking</a></code> attribute is true.</p>
    
   <dt><dfn id=selector-buffering data-dfn-type=selector data-noexport=""><code>:buffering</code></dfn><dd>
    <p>The <code id=pseudo-classes:selector-buffering><a href=#selector-buffering>:buffering</a></code> <a id=pseudo-classes:pseudo-class-35 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match
    all <a href=media.html#media-element id=pseudo-classes:media-element-4>media elements</a> whose <code id=pseudo-classes:dom-media-paused-3><a href=media.html#dom-media-paused>paused</a></code> attribute is false, <code id=pseudo-classes:dom-media-networkstate><a href=media.html#dom-media-networkstate>networkState</a></code> attribute is <code id=pseudo-classes:dom-media-network_loading><a href=media.html#dom-media-network_loading>NETWORK_LOADING</a></code>, and ready state is <code id=pseudo-classes:dom-media-have_current_data><a href=media.html#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or less.</p>
    
   <dt><dfn id=selector-stalled data-dfn-type=selector data-noexport=""><code>:stalled</code></dfn><dd><p>The <code id=pseudo-classes:selector-stalled><a href=#selector-stalled>:stalled</a></code> <a id=pseudo-classes:pseudo-class-36 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match
   all <a href=media.html#media-element id=pseudo-classes:media-element-5>media elements</a> that match the <code id=pseudo-classes:selector-buffering-2><a href=#selector-buffering>:buffering</a></code> <a id=pseudo-classes:pseudo-class-37 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> and whose <a id=pseudo-classes:is-currently-stalled href=media.html#is-currently-stalled>is
   currently stalled</a> is true.<dt><dfn id=selector-muted data-dfn-type=selector data-noexport=""><code>:muted</code></dfn><dd><p>The <code id=pseudo-classes:selector-muted><a href=#selector-muted>:muted</a></code> <a id=pseudo-classes:pseudo-class-38 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match all
   <a href=media.html#media-element id=pseudo-classes:media-element-6>media elements</a> that are <a href=media.html#concept-media-muted id=pseudo-classes:concept-media-muted>muted</a>.<dt><dfn id=selector-volume-locked data-dfn-type=selector data-noexport=""><code>:volume-locked</code></dfn><dd><p>The <code id=pseudo-classes:selector-volume-locked><a href=#selector-volume-locked>:volume-locked</a></code> <a id=pseudo-classes:pseudo-class-39 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a>
   must match all <a href=media.html#media-element id=pseudo-classes:media-element-7>media elements</a> when the user agent's
   <a id=pseudo-classes:volume-locked href=media.html#volume-locked>volume locked</a> is true.<dt><dfn id=selector-open data-dfn-type=selector><code>:open</code></dfn><dd>
    <p>The <code id=pseudo-classes:selector-open><a href=#selector-open>:open</a></code> <a id=pseudo-classes:pseudo-class-40 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> must match any
    element falling into one of the following categories:</p>

    <ul><li><p><code id=pseudo-classes:the-details-element><a href=interactive-elements.html#the-details-element>details</a></code> elements that have an <code id=pseudo-classes:attr-details-open><a href=interactive-elements.html#attr-details-open>open</a></code>
     attribute<li><p><code id=pseudo-classes:the-dialog-element-2><a href=interactive-elements.html#the-dialog-element>dialog</a></code> elements that have an <code id=pseudo-classes:attr-dialog-open><a href=interactive-elements.html#attr-dialog-open>open</a></code>
     attribute<li><p><code id=pseudo-classes:the-select-element-6><a href=form-elements.html#the-select-element>select</a></code> elements that are a <a id=pseudo-classes:drop-down-box href=rendering.html#drop-down-box>drop-down box</a> and whose drop-down
     boxes are open<li><p><code id=pseudo-classes:the-input-element-17><a href=input.html#the-input-element>input</a></code> elements that <a href=input.html#input-support-picker id=pseudo-classes:input-support-picker>support a
     picker</a> and whose pickers are open</ul>
   </dl>

  <p class=note>This specification does not define when an element matches the <code>:lang()</code> dynamic <a id=pseudo-classes:pseudo-class-41 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a>, as it is defined in
  sufficient detail in a language-agnostic fashion in <cite>Selectors</cite>.
  <a href=references.html#refsSELECTORS>[SELECTORS]</a></p>

  



  <nav><a href=custom-elements.html>← 4.13 Custom elements</a> — <a href=index.html>Table of Contents</a> — <a href=microdata.html>5 Microdata →</a></nav>
